{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}


{% from "macros-protocol.html" import callout_compact, card, split, picto with context %}

{% for entry in entries -%}
    {% if entry.component == 'callout' %}

      {% call callout_compact(
        title=entry.title,
        desc=entry.body|external_html,
        class=entry.theme_class + ' ' + entry.product_class,
      ) %}

        {{ entry.cta }}

      {% endcall %}

    {% elif entry.component == 'text' %}

      <div class="mzp-l-content {{ entry.width_class }}">
        <article>
          {{ entry.body|external_html }}
        </article>
      </div>

    {% elif entry.component == 'textColumns' %}

      <div class="mzp-l-content mzp-l-columns {{ entry.layout_class }}">
        {% for body in entry.content -%}
          <div>
            {{ body|external_html }}
          </div>
        {% endfor %}
      </div>

    {% elif entry.component == 'cardLayout' %}
      <div class="mzp-l-content">
        <div class="{{ entry.layout_class }}">

          {% for card_data in entry.cards -%}
            {% if card_data.component == 'large_card' %}
              {% set size_class = 'mzp-c-card-large' %}
            {% elif entry.layout_class == 'mzp-l-card-quarter' %}
              {% set size_class = 'mzp-c-card-extra-small' %}
            {% else %}
              {% set size_class = 'mzp-c-card-medium' %}
            {% endif %}

            {% if card_data.highres_image_url %}
             {% set image = '<img class="mzp-c-card-image" src="' ~ card_data.image_url ~ '" srcset="' ~ card_data.highres_image_url ~ ' 1.5x">' %}
            {% else %}
               {% set image = '<img class="mzp-c-card-image" src="' ~ card_data.image_url ~ '">' %}
            {% endif %}

            {{ card(
              class=size_class,
              tag_label=card_data.tag,
              title=card_data.heading,
              desc=card_data.body|external_html,
              ga_title='ga_title',
              image=image,
              aspect_ratio=card_data.aspect_ratio,
              link_url=card_data.link,
              youtube_id=card_data.youtube_id,
            ) }}

          {% endfor %}

        </div>
      </div>
    {% elif entry.component == 'sectionHeading' %}
      <h2 class="mzp-c-section-heading">{{ entry.heading }}</h2>
    {% elif entry.component == 'pictoLayout' %}

      <ul class="mzp-l-content {{ entry.layout_class }}">
      {% for picto_data in entry.pictos -%}
        {% call picto(
          image=resp_img(
            url=picto_data.image_url,
            optional_attributes={
              'class': 'mzp-c-picto-image',
              'width': entry.image_width
            }
          ),
          title=picto_data.heading,
          heading_level=entry.heading_level,
          body=picto_data.body,
          base_el='li'
        ) %}

          {{ picto_data.body|external_html }}

        {% endcall %}

      {% endfor %}
      </ul>

    {% elif entry.component == 'split' %}

      {% if entries.index(entry) == 0: %}
        {% set loading = 'eager' %}
      {% else %}
        {% set loading = 'lazy' %}
      {% endif %}

      {% set image = '<img class="mzp-c-split-media-asset" src="' ~ entry.image ~ '" loading="' ~ loading ~ '" alt="">' %}

      {% call split(
        block_class=entry.block_class,
        body_class=entry.body_class,
        theme_class=entry.theme_class,
        media_class=entry.media_class,
        mobile_class=entry.mobile_class,
        media_after=entry.media_after,
        image=image
      ) %}
        {{ entry.body|external_html }}

      {% endcall %}

    {% endif %}


{% endfor %}
